<template>
  <z-paging ref="pagingRef" @query="queryList" v-model="list">
    <template #top>
      <view style="height: 100px"></view>
    </template>
    <view v-for="(item,index) in list" :key="index">
      <view class="bg-white margin radius-lg padding">
        <view class="flex flex-sub justify-between align-center solid-bottom padding-bottom">
          <view>
            <MrAvatar :src="item.avatar" :size="80"></MrAvatar>
          </view>
          <view class="flex flex-sub text-lg flex-direction padding">
            <view>{{ item.username }}</view>
          </view>
          <view class="text-df">{{item.createTime}}</view>
        </view>
        <view class="margin-left-xl margin-tb-xs ">
          <view class="padding bg-gray radius-lg">
            <view>{{ item.content }}</view>
            <view>
              <view class="grid col-4 grid-square flex-sub">
                <view class="bg-img" v-for="(it,id) in item.images" :key="id" @tap="viewImage(item.images,it)">
                  <image :src="prefix+it" mode="aspectFill"></image>
                </view>
              </view>
            </view>
          </view>
          <view v-if="item.replyContent" class="text-blue margin-tb padding-tb text-lg solid-top">
            <view>{{ item.replyContent }}</view>
            <view class="text-df text-right">
              {{item.repltyTime}}
            </view>
          </view>

        </view>
      </view>
    </view>
  </z-paging>
</template>

<script setup lang="ts">

import {ref} from "vue";
import api from "@/api";
import MrAvatar from "@/components/common/MrAvatar.vue";
import {imagePathPrefix} from "/settings";

const pagingRef = ref()
const list = ref([])
const prefix = imagePathPrefix
const andParams = ref({})
const orParams = ref({})
const orderParams = ref({
  createTime: 2
})


const queryList = (pageNo: any, pageSize: any) => {
  api.feedback.list({
    pageNo: pageNo,
    pageSize: pageSize,
    andParams: JSON.stringify(andParams.value),
    orParams: JSON.stringify(orParams.value),
    orderParams: JSON.stringify(orderParams.value),
  }).then(res => {
    if (res && res.data.code === 0) {
      let tmp = res.data.data.records
      Object.keys(tmp).forEach(key => {
        tmp[key].images = JSON.parse(tmp[key].images)
      })
      pagingRef.value.complete(tmp);
    }
  })
}

const viewImage = (images: any, image: any) => {
  let tmp = JSON.parse(JSON.stringify(images))
  Object.keys(tmp).forEach(key => {
    tmp[key] = prefix + tmp[key]
  })
  uni.previewImage({
    urls: tmp,
    current: image
  })
}
</script>

<style scoped>

</style>